// 父传子
// 1.父传，任意变量接
// 2.子接值，用props

// 注意props的数据类型：为任意型的数据，但是是只读数据。

// 子传父

import { useState } from "react";

const Son = (props) => {
  return (
    <div>
      <h1>This is son</h1>
      <div>这是父组件传过来的值：{props.name}</div>
      <div>jsx:{props.child}</div>
      <button onClick={() => props.onChangeName("This is son")}>
        changeName
      </button>
    </div>
  );
};

const Son1 = (props) => {
  return (
    <div>
      <h1>This is son1</h1>
      <div>这是父组件传过来的值：{props.name}</div>
      <div>jsx:{props.children}</div>
    </div>
  );
};

function App() {
  const [name, setName] = useState("This is app name");
  const changeName = (name) => {
    setName(name);
  };
  return (
    <div className="App">
      <h1>父子传值</h1>
      <Son
        name={name}
        child={<span>This is span</span>}
        onChangeName={changeName}
      />
      <Son1 name={name}>
        <span>This is span</span>
      </Son1>
    </div>
  );
}

export default App;
